<template>
  <div class="main">
    <div class="search">
      <el-input placeholder="请输入要搜索的漫画"
        ><i slot="prefix" class="el-input__icon el-icon-search"></i
      ></el-input>
      <el-button icon="el-icon-search" class="searchButton">搜索</el-button>
      <el-button class="network">∞全网搜</el-button>
      <span>搜漫引擎提供全网搜索服务 </span>
    </div>
    <div class="content">
      <div class="classification">
        <ul>
          <li
            v-for="(item, index) in classificationList"
            :key="index"
            :class="index == 0 ? '' : 'marginStyle'"
          >
            {{ item }}
          </li>
        </ul>
        <span><i class="el-icon-menu"></i>全部分类</span>
      </div>
      <!-- 轮询盒子 -->
      <div class="recommendDiv">
        <div class="rotation">
          <el-carousel trigger="click" height="380px" :autoplay="true">
            <el-carousel-item
              v-for="(item, index) in recommendDivList"
              :key="index"
            >
              <img :src="item" alt="" />
            </el-carousel-item>
          </el-carousel>
        </div>
        <div class="recommendComic">
          <div class="recommendComicTop">
            <div
              v-for="item in recommendComicTopList"
              :key="item.id"
              :class="item.id == 2 ? 'fledEndStyle' : ''"
            >
              <img :src="item.url" alt="" />
            </div>
          </div>
          <div class="recommendComicbottom">
            <div v-for="item in recommendComicbottomList" :key="item.id">
              <img :src="item.url" alt="" />
            </div>
          </div>
        </div>
      </div>
      <div class="originalDiv">
        <div class="title">
          <span class="fontStyle">
            <img
              src="../../assets/images/comic/HomePage/title/index-title-1.png"
              alt=""
            />
            原创精品</span
          >
          <span class="moreStyle"
            >更多
            <img
              src="../../assets/images/comic/HomePage/title/index-title-more.png"
              alt=""
          /></span>
        </div>
        <div class="originalComicDiv">
          <div class="originalComicImgList">
            <swiper :options="swiperOption">
              <swiper-slide
                v-for="(slide, key) in originalComicImgAllList"
                :key="key"
              >
                <div
                  class="originalComicInfo"
                  v-for="(info, key) in slide.infoList"
                  :key="key"
                >
                  <div class="imgDiv">
                    <img :src="info.imgPath" alt="" />
                  </div>
                  <div class="comicInfo">
                    <span class="title">{{ info.name }}</span>
                    <el-rate v-model="info.fraction" disabled> </el-rate>
                    <span class="chapter"
                      >最新 <a href="#">{{ info.chapter }}</a></span
                    >
                    <span class="content">{{ info.content }}</span
                    ><br />
                    <div class="labelDiv">
                      <el-tag
                        v-for="(item, index) in info.labelList"
                        :key="index"
                        size="mini"
                        >{{ item }}</el-tag
                      >
                    </div>
                  </div>
                </div>
              </swiper-slide>
              <!--以下看需要添加-->
            </swiper>
            <div
              class="swiper-button-prev swiper-button-black"
              slot="button-prev"
            ></div>
            <div
              class="swiper-button-next swiper-button-black"
              slot="button-next"
            ></div>
          </div>
        </div>
      </div>
      <div class="originalComicPage">
        <div class="swiper-pagination" slot="pagination"></div>
      </div>
      <div class="ranking">
        <v-ranking
          :comicRankingList="chinaComicRankingList"
          :title="'国漫热门排行榜'"
        ></v-ranking>
        <v-ranking
          :comicRankingList="japanComicRankingList"
          :title="'日漫热门排行榜'"
        ></v-ranking>
        <v-ranking
          :comicRankingList="comprehensiveComicRankingList"
          :title="'综合热门排行榜'"
        ></v-ranking>
      </div>
      <div class="recentUpdateComicMain">
        <div class="title">
          <i class="el-icon-time"></i>
          <span>最近更新</span>
          <ul>
            <li v-for="(item, index) in dayArrays" :key="index">
              <a
                href="#"
                @mouseover="highlightStyleIndex = index"
                :class="highlightStyleIndex === index ? 'highlightStyle' : ''"
                >{{ item }}</a
              >
            </li>
          </ul>
        </div>
        <div class="infoDiv">
          <v-recent-update-comic
            :recentUpdateList="
              index % 2 == 0
                ? recentUpdateComicToday
                : recentUpdateComicYesterday
            "
            v-for="(item, index) in dayArrays"
            :key="index"
            :class="
              highlightStyleIndex === index ? 'recentUpdateShowStyle' : ''
            "
          ></v-recent-update-comic>
        </div>
      </div>
      <div class="raskMainDiv">
        <div class="title">
          <div class="titleImg">
            <img
              src="../../assets/images/comic/HomePage/riseLast/index-title-7.png"
              alt=""
            />
            <span>上升最快</span>
          </div>
          <div class="moreDiv">
            更多
            <img
              src="../../assets/images/comic/HomePage/title/index-title-more.png"
              alt=""
            />
          </div>
        </div>
        <div class="raskInfoMain">
          <v-info-component
            v-for="item in raskLastList"
            :key="item.id"
            :infoVo="item"
          ></v-info-component>
        </div>
      </div>
      <div class="hotCategoriesMain">
        <div class="hotCategoriesMainTitle">
          <i class="el-icon-menu"></i>
          <span class="title">热门分类</span>
          <ul>
            <li
              v-for="(item, index) in hotCategoriesArrays"
              :key="index"
              @mouseover="hotCategoriesHighlightStyleIndex = index"
              :class="
                index === hotCategoriesHighlightStyleIndex
                  ? 'hotCategoriesHighlightStyle'
                  : ''
              "
            >
              {{ item }}
            </li>
          </ul>
          <div class="moreDiv">
            更多<img
              src="../../assets/images/comic/HomePage/title/index-title-more.png"
              alt=""
            />
          </div>
        </div>
        <div class="hotCategoriesInfoMain">
          <v-hot-categories
            :class="
              hotCategoriesHighlightStyleIndex == index ? 'divDisplay' : ''
            "
            v-for="(item, index) in hotCategoriesArrays"
            :key="index"
            :hotCategories="
              index % 2 == 0 ? hotCategoriesSingleList : hotCategoriesDoubleList
            "
            :hotCategoriesComicList="
              index % 2 == 0
                ? hotCategoriesSmallSingleList
                : hotCategoriesSmallDoubleList
            "
          ></v-hot-categories>
          <!-- <v-hot-categories
            :hotCategories="hotCategoriesSingleList"
            :hotCategoriesComicList="hotCategoriesSmallSingleList"
          ></v-hot-categories> -->
        </div>
      </div>
      <div class="endDiv"></div>
    </div>
  </div>
</template>

<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper';
import vRanking from './Ranking';
import vRecentUpdateComic from './RecentUpdateComic';
import vInfoComponent from './InfoComponent';
import vHotCategories from './HotCategoriesCom';
export default {
  name: 'work',
  components: {
    Swiper,
    SwiperSlide,
    vRanking,
    vRecentUpdateComic,
    vInfoComponent,
    vHotCategories
  },
  data () {
    return {
      classificationList: ['原创', '热血', '冒险', '魔法', '科幻', '奇幻', '运动', '历史', '战争', '恋爱', '后宫', '校园', '悬疑', '恐怖', '搞笑', '彩虹', '百合'],
      recommendDivList: [require('../../assets/images/comic/HomePage/recommend/1.jpg'), require('../../assets/images/comic/HomePage/recommend/2.jpg'), require('../../assets/images/comic/HomePage/recommend/3.jpg')],

      recommendComicTopList: [
        { id: '1', fild: 'longPhotoes', url: require('../../assets/images/comic/HomePage/recommendComic/1.jpg') },
        { id: '2', fild: 'longPhotoes', url: require('../../assets/images/comic/HomePage/recommendComic/2.jpg') }
      ],
      recommendComicbottomList: [
        { id: '3', fild: 'shortPhhotoes', url: require('../../assets/images/comic/HomePage/recommendComic/3.jpg') },
        { id: '4', fild: 'shortPhhotoes', url: require('../../assets/images/comic/HomePage/recommendComic/4.jpg') },
        { id: '5', fild: 'shortPhhotoes', url: require('../../assets/images/comic/HomePage/recommendComic/5.jpg') }
      ],
      originalComicImgAllList: [
        {
          id: '1',
          infoList: [
            { id: '1', name: '山海逆战', chapter: '第629回 孽种（下）', content: '山海世界，人与异兽谁胜谁负！', labelList: ['热血', '神鬼'], imgPath: require('../../assets/images/comic/HomePage/originalImgList/001.jpg'), fraction: 4 },
            { id: '2', name: '外星人 饲养手册', chapter: '第105回', content: '地球少年……踏上宇宙霸主之路…… 2015年夏，惨遭女...', labelList: ['热血', '科幻'], imgPath: require('../../assets/images/comic/HomePage/originalImgList/002.jpg'), fraction: 5 },
            { id: '3', name: '修罗剑尊', chapter: '第154回', content: '万年前，刀祖于无妄山斩杀剑皇，从此下令屠尽天下剑修...', labelList: ['奇幻'], imgPath: require('../../assets/images/comic/HomePage/originalImgList/003.jpg'), fraction: 1 },
            { id: '4', name: '女票芳龄30+', chapter: '第47回 发帖求助', content: '八年的爱情长跑，自以为修成正果。却不知自始至终，...', labelList: ['恋爱'], imgPath: require('../../assets/images/comic/HomePage/originalImgList/004.jpg'), fraction: 3 },
            { id: '5', name: '王爷不能撩', chapter: '第243回  从天而降的真命天女', content: '这个王爷不能碰啊！', labelList: ['恋爱', '搞笑'], imgPath: require('../../assets/images/comic/HomePage/originalImgList/005.jpg'), fraction: 2 },
            { id: '6', name: '督主偏头痛', chapter: '第92回', content: '七流杀手一朝重生21世纪，叶半夏踌躇满志想要实现自己...', labelList: ['搞笑', '奇幻'], imgPath: require('../../assets/images/comic/HomePage/originalImgList/006.jpg'), fraction: 1 }
          ]
        },
        {
          id: '2',
          infoList: [
            { id: '7', name: '降神之伞', chapter: '第24回 降神之战Ⅳ', content: '【首发/每周三、六更新】初中生谭九玄，从一把油纸伞...', labelList: ['热血', '冒险', '神鬼'], imgPath: require('../../assets/images/comic/HomePage/originalImgList/007.jpg'), fraction: 1 },
            { id: '8', name: '最强升级', chapter: '第176回 等候多时', content: '系统在手，天下我有！女人我要最美！权力我要最大！身...', labelList: ['热血'], imgPath: require('../../assets/images/comic/HomePage/originalImgList/008.jpg'), fraction: 2 },
            { id: '9', name: '都市浪子', chapter: '第33回 铁军之妻', content: '“其实我也是第一次，发生这样的事我们谁也想不到。你...', labelList: ['热血', '搞笑'], imgPath: require('../../assets/images/comic/HomePage/originalImgList/009.jpg'), fraction: 2 },
            { id: '10', name: '天降萌宝小熊猫：萌妃来袭', chapter: '第108回 现代篇25 您的小可爱已黑化！', content: '一朝投胎竟变成圆滚滚的熊猫胖达！？喂，前面那位路过...', labelList: ['恋爱', '搞笑'], imgPath: require('../../assets/images/comic/HomePage/originalImgList/010.jpg'), fraction: 4 },
            { id: '11', name: '霸道总裁求抱抱', chapter: '第167回 来不及了', content: '一晚缠绵，甩了两百块自认倒霉！以为从此是路人，却三...', labelList: ['恋爱'], imgPath: require('../../assets/images/comic/HomePage/originalImgList/011.jpg'), fraction: 3 },
            { id: '12', name: '盛宠之锦绣征途', chapter: '第136回 遭贼惦记了', content: '【每周四/周六更新】第一次见面，秦凌把诸葛云乐的衣...', labelList: ['恋爱'], imgPath: require('../../assets/images/comic/HomePage/originalImgList/012.jpg'), fraction: 3 }
          ]
        }

      ],
      chinaComicRankingList: [
        { id: '1', name: '武逆', content: '【每周四、六更新】天武大陆，强...', imgPath: require('../../assets/images/comic/HomePage/ComicRankImg/001.jpg') },
        { id: '2', name: '外星人 饲养手册', content: '地球少年……踏上宇宙霸主之路…...', imgPath: require('../../assets/images/comic/HomePage/ComicRankImg/002.jpg') },
        { id: '3', name: '尸期将至', content: '一场突如其来的丧尸潮席卷校园，...', imgPath: require('../../assets/images/comic/HomePage/ComicRankImg/003.jpg') },
        { id: '4', name: '我家皇帝又吃醋了', content: '当逃婚王爷遇上愁嫁姑娘，杨云亭...', imgPath: require('../../assets/images/comic/HomePage/ComicRankImg/004.jpg') },
        { id: '5', name: '督主偏头痛', content: '七流杀手一朝重生21世纪，叶半夏...', imgPath: require('../../assets/images/comic/HomePage/ComicRankImg/005.jpg') }
      ],
      japanComicRankingList: [
        { id: '1', name: '正太贤者失业后', content: '被上天赐予“贤者”印记的少年·...', imgPath: require('../../assets/images/comic/HomePage/ComicRankImg/006.jpg') },
        { id: '2', name: '咒术回战', content: '漫画《咒术回战》是由新锐漫画家...', imgPath: require('../../assets/images/comic/HomePage/ComicRankImg/008.jpg') },
        { id: '3', name: '鬼灭之刃', content: '少年与gui的战斗不曾停歇', imgPath: require('../../assets/images/comic/HomePage/ComicRankImg/007.jpg') },
        { id: '4', name: '海贼王', content: '相传22年前，在一个童话般的世界...', imgPath: require('../../assets/images/comic/HomePage/ComicRankImg/009.jpg') },
        { id: '5', name: '转生村人 ～最强的悠闲生活', content: '虽然没有电也没有自来水，但是被...', imgPath: require('../../assets/images/comic/HomePage/ComicRankImg/010.jpg') }
      ],
      comprehensiveComicRankingList: [
        { id: '1', name: '山海逆战', content: '山海世界，人与异兽谁胜谁负！', imgPath: require('../../assets/images/comic/HomePage/ComicRankImg/011.jpg') },
        { id: '2', name: '风云全集', content: '金麟岂是池中物,一遇风云便化龙...', imgPath: require('../../assets/images/comic/HomePage/ComicRankImg/012.jpg') },
        { id: '3', name: '火凤燎原', content: '在汉朝末年，朝廷积弱，天下四方...', imgPath: require('../../assets/images/comic/HomePage/ComicRankImg/013.jpg') },
        { id: '4', name: '降神之伞', content: '【首发/每周三、六更新】初中生...', imgPath: require('../../assets/images/comic/HomePage/ComicRankImg/014.jpg') },
        { id: '5', name: '魂兽纪', content: '【首发/每周三、六更新】百年前...', imgPath: require('../../assets/images/comic/HomePage/ComicRankImg/015.jpg') }
      ],
      recentUpdateComicToday: [
        { id: '1', name: '中年贤者的异世界生活日记', chapter: '第18话', lastTime: '4分钟前更新', imgPath: require('../../assets/images/comic/HomePage/recentUpdate/001.jpg'), fraction: 1, autor: '天刑', content: '六道的恶女们漫画 ，在这个全是混混的学校，苦逼少年六道获.555555555555.' },
        { id: '2', name: '和喜欢游戏的朋友各种轶事', chapter: '第52话', lastTime: '4分钟前更新', imgPath: require('../../assets/images/comic/HomePage/recentUpdate/002.jpg'), fraction: 5, autor: '天刑', content: '我可爱的御宅女友漫画 ，暗恋的美少女居然是个宅女！？' },
        { id: '3', name: '我家的老婆小小的很可爱', chapter: '第15话', lastTime: '4分钟前更新', imgPath: require('../../assets/images/comic/HomePage/recentUpdate/003.jpg'), fraction: 2, autor: 'ヤスダスズ', content: '既怕人又不擅言谈…向这种社恐女生扑来的竟是百合的魔爪…...' },
        { id: '4', name: '倾城一抹笑', chapter: '第5话', lastTime: '4分钟前更新', imgPath: require('../../assets/images/comic/HomePage/recentUpdate/004.jpg'), fraction: 4, autor: 'ヤスダスズ', content: '既怕人又不擅言谈…向这种社恐女生扑来的竟是百合的魔爪…...' },
        { id: '5', name: '前辈是伪娘', chapter: '第48话', lastTime: '4分钟前更新', imgPath: require('../../assets/images/comic/HomePage/recentUpdate/005.jpg'), fraction: 4, autor: '天刑', content: '六道的恶女们漫画 ，在这个全是混混的学校，苦逼少年六道获..' },
        { id: '6', name: '铁壁蜜月期', chapter: '第20话', lastTime: '4分钟前更新', imgPath: require('../../assets/images/comic/HomePage/recentUpdate/006.jpg'), fraction: 5, autor: 'ヤスダスズ', content: '我可爱的御宅女友漫画 ，暗恋的美少女居然是个宅女！？' },
        { id: '7', name: '龙珠超', chapter: '第67话 大团圆，然后.....', lastTime: '4分钟前更新', imgPath: require('../../assets/images/comic/HomePage/recentUpdate/007.jpg'), fraction: 1, autor: 'ヤスダスズ', content: '既怕人又不擅言谈…向这种社恐女生扑来的竟是百合的魔爪…...' },
        { id: '8', name: '辉夜大小姐想让我告白 ~天才们的恋爱头脑战~', chapter: '周刊202  ', lastTime: '4分钟前更新', imgPath: require('../../assets/images/comic/HomePage/recentUpdate/008.jpg'), fraction: 4, autor: '天刑', content: '六道的恶女们漫画 ，在这个全是混混的学校，苦逼少年六道获..' },
        { id: '9', name: '转生药师环游异世界', chapter: '番外01', lastTime: '4分钟前更新', imgPath: require('../../assets/images/comic/HomePage/recentUpdate/009.jpg'), fraction: 2, autor: 'ヤスダスズ', content: '六道的恶女们漫画 ，在这个全是混混的学校，苦逼少年六道获..' },
        { id: '10', name: '异世界求食的开挂旅程', chapter: '附录01', lastTime: '4分钟前更新', imgPath: require('../../assets/images/comic/HomePage/recentUpdate/010.jpg'), fraction: 3, autor: 'ヤスダスズ', content: '我可爱的御宅女友漫画 ，暗恋的美少女居然是个宅女！？' },
        { id: '11', name: '我的青梅竹马面无表情', chapter: '第4话', lastTime: '4分钟前更新', imgPath: require('../../assets/images/comic/HomePage/recentUpdate/011.jpg'), fraction: 4, autor: '天刑', content: '六道的恶女们漫画 ，在这个全是混混的学校，苦逼少年六道获..' },
        { id: '12', name: '四代目的花婿', chapter: '第24话 ', lastTime: '4分钟前更新', imgPath: require('../../assets/images/comic/HomePage/recentUpdate/012.jpg'), fraction: 2, autor: 'ヤスダスズ', content: '既怕人又不擅言谈…向这种社恐女生扑来的竟是百合的魔爪…...' },
        { id: '13', name: '双胞胎之间的那些事', chapter: '第29话 ', lastTime: '4分钟前更新', imgPath: require('../../assets/images/comic/HomePage/recentUpdate/013.jpg'), fraction: 5, autor: '天刑', content: '我可爱的御宅女友漫画 ，暗恋的美少女居然是个宅女！？' },
        { id: '14', name: '猫与龙', chapter: '第25话 ', lastTime: '4分钟前更新', imgPath: require('../../assets/images/comic/HomePage/recentUpdate/014.jpg'), fraction: 4, autor: 'ヤスダスズ', content: '六道的恶女们漫画 ，在这个全是混混的学校，苦逼少年六道获..' }

      ],
      recentUpdateComicYesterday: [
        { id: '1', name: '在充满怪物的世界里为所欲为', chapter: '第18话', lastTime: '昨天 21:28更新', imgPath: require('../../assets/images/comic/HomePage/recentUpdate/015.jpg'), fraction: 2, autor: 'ヤスダスズ', content: '既怕人又不擅言谈…向这种社恐女生扑来的竟是百合的魔爪…...' },
        { id: '2', name: '在逝世之时昙花一现', chapter: '第17话', lastTime: '昨天 21:28更新', imgPath: require('../../assets/images/comic/HomePage/recentUpdate/016.jpg'), fraction: 5, autor: '天刑', content: '我可爱的御宅女友漫画 ，暗恋的美少女居然是个宅女！？' },
        { id: '3', name: '夜樱四重奏', chapter: '第157话', lastTime: '昨天 21:28更新', imgPath: require('../../assets/images/comic/HomePage/recentUpdate/017.jpg'), fraction: 3, autor: '天刑', content: '六道的恶女们漫画 ，在这个全是混混的学校，苦逼少年六道获..' },
        { id: '4', name: '小豆泥是世界的中心', chapter: '第7.2话', lastTime: '昨天 21:28更新', imgPath: require('../../assets/images/comic/HomePage/recentUpdate/018.jpg'), fraction: 1, autor: 'ヤスダスズ', content: '既怕人又不擅言谈…向这种社恐女生扑来的竟是百合的魔爪…...' },
        { id: '5', name: 'BNA动物新世代', chapter: '第3话', lastTime: '昨天 21:28更新', imgPath: require('../../assets/images/comic/HomePage/recentUpdate/019.jpg'), fraction: 1, autor: 'ヤスダスズ', content: '我可爱的御宅女友漫画 ，暗恋的美少女居然是个宅女！？' },
        { id: '6', name: '死亡便利店～100天后获救的便利店员～', chapter: '第80话', lastTime: '昨天 21:28更新', imgPath: require('../../assets/images/comic/HomePage/recentUpdate/020.jpg'), fraction: 3, autor: '天刑', content: '六道的恶女们漫画 ，在这个全是混混的学校，苦逼少年六道获..' },
        { id: '7', name: '狐狸大人的异族婚姻谭', chapter: '第4话', lastTime: '昨天 21:28更新', imgPath: require('../../assets/images/comic/HomePage/recentUpdate/021.jpg'), fraction: 4, autor: '天刑', content: '六道的恶女们漫画 ，在这个全是混混的学校，苦逼少年六道获..' },
        { id: '8', name: '我不是说了日常要平均值吗？', chapter: '第10话', lastTime: '昨天 21:28更新', imgPath: require('../../assets/images/comic/HomePage/recentUpdate/022.jpg'), fraction: 2, autor: 'ヤスダスズ', content: '既怕人又不擅言谈…向这种社恐女生扑来的竟是百合的魔爪…...' },
        { id: '9', name: '博丽神社例大祭报告漫画线下会', chapter: '卧床篇', lastTime: '昨天 21:28更新', imgPath: require('../../assets/images/comic/HomePage/recentUpdate/023.jpg'), fraction: 5, autor: '天刑', content: '六道的恶女们漫画 ，在这个全是混混的学校，苦逼少年六道获..' },
        { id: '10', name: '异梦', chapter: '第15话', lastTime: '昨天 21:28更新', imgPath: require('../../assets/images/comic/HomePage/recentUpdate/024.jpg'), fraction: 3, autor: '天刑', content: '六道的恶女们漫画 ，在这个全是混混的学校，苦逼少年六道获..' },
        { id: '11', name: '尾行X尾行', chapter: '第58话', lastTime: '昨天 21:28更新', imgPath: require('../../assets/images/comic/HomePage/recentUpdate/025.jpg'), fraction: 4, autor: 'ヤスダスズ', content: '六道的恶女们漫画 ，在这个全是混混的学校，苦逼少年六道获..' },
        { id: '12', name: '两个人的末世', chapter: '第12话 ', lastTime: '昨天 21:28更新', imgPath: require('../../assets/images/comic/HomePage/recentUpdate/026.jpg'), fraction: 2, autor: '天刑', content: '既怕人又不擅言谈…向这种社恐女生扑来的竟是百合的魔爪…...' },
        { id: '13', name: '两个人的末世', chapter: '第2话 ', lastTime: '昨天 21:28更新', imgPath: require('../../assets/images/comic/HomePage/recentUpdate/027.jpg'), fraction: 1.5, autor: '天刑' },
        { id: '14', name: '姊姊把男主人公捡回家了', chapter: '棄坑公告 ', lastTime: '昨天 21:28更新', imgPath: require('../../assets/images/comic/HomePage/recentUpdate/028.jpg'), fraction: 4, autor: 'ヤスダスズ', content: '我可爱的御宅女友漫画 ，暗恋的美少女居然是个宅女！？' }
      ],
      raskLastList: [
        { id: '1', name: '魔王建造地下城转生到异世界建造人外娘', chapter: '第29话', imgPath: require('../../assets/images/comic/HomePage/riseLast/001.jpg'), fraction: 2, autor: '远野ノオト', content: '魔王建造地下城转生到异世界建造人外娘的专属乐园吧漫画 ，...' },
        { id: '2', name: '时间悖论代笔人', chapter: '第14话', imgPath: require('../../assets/images/comic/HomePage/riseLast/002.jpg'), fraction: 5, autor: '伊达恒大', content: '雷云密布的天空、冰冷刺骨的大雨。 梦想即将放弃。在做出这...' },
        { id: '3', name: '重来吧、魔王大人！ ', chapter: '第27话', imgPath: require('../../assets/images/comic/HomePage/riseLast/003.jpg'), fraction: 3, autor: '身ノ丈あまる', content: '随处可见的社会人士——大野晶（おおの　あきら）在自己运...' },
        { id: '4', name: '自称恶役大小姐的婚约者观察记录', chapter: '第26话', imgPath: require('../../assets/images/comic/HomePage/riseLast/004.jpg'), fraction: 1, autor: '莲见ナツメ  しき ', content: '自称恶役大小姐的婚约者观察记录漫画 ，面前出现一个自称是...' },
        { id: '5', name: '天才王子的赤字国家振兴术', chapter: '第28话', imgPath: require('../../assets/images/comic/HomePage/riseLast/005.jpg'), fraction: 1, autor: 'ファルまろ', content: '天才王子的赤字国家振兴术漫画 ，担负着没有资源、人才、兵...' },
        { id: '6', name: '中年贤者的异世界生活日记', chapter: '第18话', imgPath: require('../../assets/images/comic/HomePage/riseLast/006.jpg'), fraction: 3, autor: '888  寿安清', content: '中年贤者的异世界生活日记漫画 ，无业大叔大迫聪（40岁）自...' },
        { id: '7', name: '骑士魔法', chapter: '第48话', imgPath: require('../../assets/images/comic/HomePage/riseLast/007.jpg'), fraction: 4, autor: '加藤拓弍', content: '骑士魔法漫画 ，极度热爱机器人的编程师出车祸挂掉后，穿越...' }

      ],
      hotCategoriesSingleList: [
        { id: '1', name: '武逆', autor: 'iCiyuan动漫', chapter: '第91回 体质突破了！', content: '【每周四、六更新】天武大陆，强者为尊。 风家大少风浩，身怀绝世体质，却被认为是修炼废柴，受尽屈辱！ 机缘之下，身体异变，让他逆转人生！他以异晶锻体，成就无上肉身。 待得掌控虚武之时，碎灭乾坤，怒斩八方！', labelList: ['热血', '冒险'], imgPath: require('../../assets/images/comic/HomePage/HotCategories/big/001.jpg'), fraction: 4 },
        { id: '2', name: '咒术回战', autor: '芥见下々', chapter: '第133话 试看版', content: '【每周四、六更新】天武大陆，强者为尊。 风家大少风浩，身怀绝世体质，却被认为是修炼废柴，受尽屈辱！ 机缘之下，身体异变，让他逆转人生！他以异晶锻体，成就无上肉身。 待得掌控虚武之时，碎灭乾坤，怒斩八方！', labelList: ['热血', '校园', '冒险', '奇幻'], imgPath: require('../../assets/images/comic/HomePage/HotCategories/big/002.jpg'), fraction: 4 },
        { id: '3', name: '鬼灭之刃', autor: '吾峠呼世晴', chapter: '特别短篇', content: '时值日本大正时期。传说太阳下山后，恶鬼出没吃人。亦有猎鬼人斩杀恶鬼、保护人们。卖炭少年·炭治郎，他那平凡而幸福的日常生活，在家人遭到恶鬼袭击的那一天发生剧变。母亲与四个弟妹惨遭杀害，而与他一起生还的妹妹：祢豆子亦异变成凶暴的鬼。在猎鬼人的指引下，立志成为猎鬼人的炭治郎与变成鬼却尚存理智的祢豆子二人踏上了旅程。通过艰苦的剑术修行与赌命试炼，炭治郎成为了鬼猎人组织“鬼杀队”的一员。为了让妹妹祢豆子变回人类，为了讨伐杀害家人的恶鬼，为了斩断悲伤的连锁，少年与鬼的战斗不曾停歇。', labelList: ['热血', '冒险'], imgPath: require('../../assets/images/comic/HomePage/HotCategories/big/003.jpg'), fraction: 4 }
      ],
      hotCategoriesDoubleList: [
        { id: '1', name: '我家皇帝又吃醋了', autor: '漫城文化', chapter: '第100回', content: '当逃婚王爷遇上愁嫁姑娘，杨云亭秒杀混混英姿飒爽：“你若想要报恩，那娶我为妻可好？” 赵元祁双手抱胸提防着对面如狼似虎的姑娘：“姑......姑娘是要我......以身相许？”', labelList: ['恋爱'], imgPath: require('../../assets/images/comic/HomePage/HotCategories/big/004.jpg'), fraction: 4 },
        { id: '2', name: '转生前就被盯上了', autor: '冰堂れん一花カナウ', chapter: '第4话', content: '雷尼蕾特虽然是个美人，家世也不错，但是却是个天生克夫命！怎么会这样呢？这件事要从前前前世开始紧追不舍的那个男人说起…… ???', labelList: ['恋爱'], imgPath: require('../../assets/images/comic/HomePage/HotCategories/big/005.jpg'), fraction: 4 },
        { id: '3', name: '恶役千金也会得到幸福', autor: '多人', chapter: '第5话', content: '恶役千金短篇合集！ 五个独立小故事，高甜！', labelList: ['恋爱'], imgPath: require('../../assets/images/comic/HomePage/HotCategories/big/006.jpg'), fraction: 4 }
      ],
      hotCategoriesSmallSingleList: [
        { id: '1', name: '海贼王', chapter: '第999话 为君酿待酒', imgPath: require('../../assets/images/comic/HomePage/HotCategories/small/001.jpeg'), fraction: 2, autor: '尾田荣一郎 ', content: '相传22年前，在一个童话般的世界里，曾经拥有一切的海贼王...' },
        { id: '2', name: '外星人 饲养手册', chapter: '第115回 ', imgPath: require('../../assets/images/comic/HomePage/HotCategories/small/002.jpg'), fraction: 5, autor: '星际互娱', content: '地球少年……踏上宇宙霸主之路…… 2015年夏，惨遭女友戴绿...' },
        { id: '3', name: '王者天下 ', chapter: '第573话 挺身直面之人', imgPath: require('../../assets/images/comic/HomePage/HotCategories/small/003.jpg'), fraction: 3, autor: '原泰久 ', content: '王者天下漫画 ，王者天下漫画是一部历史战争和励志热血漫画......' },
        { id: '4', name: '一拳超人', chapter: '第181话 共鸣', imgPath: require('../../assets/images/comic/HomePage/HotCategories/small/004.jpg'), fraction: 1, autor: '村田雄介', content: '主人公埼玉原本是一名整日奔波于求职的普通人。3年前的一天...' },
        { id: '5', name: '失格纹的最强贤者～世界最强的贤者为了变得更强而转生了～', chapter: '第42.4话 试看版', imgPath: require('../../assets/images/comic/HomePage/HotCategories/small/005.jpg'), fraction: 1, autor: '进行诸岛/肝匠/冯昊 ', content: '为了获得『最适合魔法战斗的纹章』成为最强魔法使，此人将...' },
        { id: '6', name: '妖神记', chapter: '第307回 病因是......（上）', imgPath: require('../../assets/images/comic/HomePage/HotCategories/small/006.jpg'), fraction: 3, autor: '踏雪动漫 ', content: '妖灵世界，一切才刚开始' },
        { id: '7', name: '都市浪子', chapter: '第34回 沐沧澜不高兴', imgPath: require('../../assets/images/comic/HomePage/HotCategories/small/007.jpg'), fraction: 4, autor: '平流层', content: '其实我也是第一次，发生这样的事我们谁也想不到。你是我...' },
        { id: '8', name: '魔王建造地下城转生到异世界建造人外娘', chapter: '第29话', imgPath: require('../../assets/images/comic/HomePage/HotCategories/small/008.jpg'), fraction: 4, autor: '流优', content: '魔王建造地下城转生到异世界建造人外娘的专属乐园吧漫画 ，...' }

      ],
      hotCategoriesSmallDoubleList: [
        { id: '1', name: '辉夜大小姐想让我告白 ~天才们的恋爱头脑战~', chapter: '周刊202', imgPath: require('../../assets/images/comic/HomePage/HotCategories/small/009.jpg'), fraction: 2, autor: '赤坂アカ', content: '恋爱正是适合天才的游戏！？秀知院学园的学生会长（天才）...' },
        { id: '2', name: '机器人会梦见爱吗？', chapter: '第8话  ', imgPath: require('../../assets/images/comic/HomePage/HotCategories/small/010.jpg'), fraction: 5, autor: 'ヒダカリョウ', content: '站在这个被称为天才科学家的父亲所留下的男性人形机器人面...' },
        { id: '3', name: '不幸公寓 ', chapter: '第73话', imgPath: require('../../assets/images/comic/HomePage/HotCategories/small/011.jpg'), fraction: 3, autor: '약국', content: '受不了这个现实的社会了，她作为一名设计师却每次都要仿造...' },
        { id: '4', name: '恶女的二次人生', chapter: '二次+女王棄坑公告 ', imgPath: require('../../assets/images/comic/HomePage/HotCategories/small/012.jpg'), fraction: 1, autor: '피치베리', content: '謀略的天才，造就皇帝！“只有哥哥成功，妳才能成功“...' },
        { id: '5', name: '这个老师绝对是故意的', chapter: '第7话', imgPath: require('../../assets/images/comic/HomePage/HotCategories/small/013.jpg'), fraction: 1, autor: 'ゆず未来', content: '这个老师绝对是故意的' },
        { id: '6', name: '千纮君沉迷于我', chapter: '第1.6话', imgPath: require('../../assets/images/comic/HomePage/HotCategories/small/014.jpg'), fraction: 3, autor: '伊藤里', content: '“你就是我的缪斯女神。”“脱掉吧”未知突然被初次见面的...' },
        { id: '7', name: '兽人先生与小花小姐', chapter: '第16话', imgPath: require('../../assets/images/comic/HomePage/HotCategories/small/015.jpg'), fraction: 4, autor: '柚树ちひろ', content: '「你是怎么进来的？人类。」兽人与人类——两个种族之间矗...' },
        { id: '8', name: '第二第四火曜日之恋', chapter: '第6话', imgPath: require('../../assets/images/comic/HomePage/HotCategories/small/016.jpg'), fraction: 4, autor: 'ヨルモ(高濑わか)', content: '一间老旧咖啡店的店员小律，爱上了只在每月第二和第四个星...' }

      ],
      dayArrays: ['今天', '昨天', '周日', '周六', '周五', '周四', '周三'],
      hotCategoriesArrays: ['热血', '恋爱', '校园', '奇幻', '科幻'],
      highlightStyleIndex: 0,
      hotCategoriesHighlightStyleIndex: 0,
      testVo: { id: '7', name: '骑士魔法', chapter: '第48话', imgPath: require('../../assets/images/comic/HomePage/riseLast/007.jpg'), fraction: 4, autor: '加藤拓弍', content: '骑士魔法漫画 ，极度热爱机器人的编程师出车祸挂掉后，穿越...' },
      swiperOption: {
        // 分页器配置
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        },
        loop: true,
        // 设定初始化时slide的索引
        initialSlide: 0,
        // Slides的滑动方向，可设置水平(horizontal)或垂直(vertical)
        direction: 'horizontal',
        // 自动切换图配置
        autoplay: false,
        // 箭头配置
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        }
      }
    };
  },
  methods: {

  }
};
</script>
<style lang="less" scoped>
.main {
  width: 100%;
  background-color: #ffffff;
  // display: flex;
  // flex-direction: column;
  overflow: auto;
  height: 100%;
}
.main .search {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
  background-image: url(../../assets/images/comic/HomePage/search-bg.jpg);
  .el-input {
    width: 450px;
  }
  .el-button {
    height: 40px;
    width: 90px;
    margin: 0px;
    padding: 0px;
  }
  .searchButton {
    background-color: #fd113a;
    color: #fff;
  }
  .network {
    background-color: #ff8950;
    color: #fff;
  }
  span {
    font-size: 12px;
    color: red;
    margin-left: 50px;
  }
}
.main .content {
  width: 1200px;
  margin: 0 auto;
  background-color: white;
  height: 900px;
  //flex: 1;
}
.main .content .classification {
  width: 100%;
  height: 18px;
  // background-color: white;
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  ul {
    display: flex;
    align-items: center;
    li {
      float: left;
      list-style: none;
      font-size: 15px;
      font-weight: bold;
    }
    .marginStyle {
      margin-left: 13px;
    }
  }
  span {
    display: flex;
    align-items: center;
    display: block;
    height: 100%;
    font-size: 15px;
    font-weight: bold;
  }
}
.main .content .recommendDiv {
  width: 100%;
  height: 380px;
  // background-color: green;
  margin-top: 8px;
  display: flex;
  flex-direction: row;
  .rotation {
    width: 510px;
    height: 100%;
    .el-carousel {
      /deep/ .el-carousel__indicators {
        position: absolute;
        right: -230px;
        display: flex;
        justify-content: flex-end;
        .el-carousel__indicator {
          width: 10px;
          height: 10px;
          border-radius: 50%;
          button {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: red;
          }
        }
      }
      .el-carousel__container .el-carousel__item {
        img {
          height: 100%;
        }
      }
    }
  }
  .recommendComic {
    height: 100%;
    // background-color: palegreen;
    flex: 1;
    margin-left: 8px;
    .recommendComicTop {
      width: 100%;
      height: 50%;
      .fledEndStyle {
        display: flex;
        justify-content: flex-end;
      }
      div {
        width: 49.8%;
        height: 100%;
        float: left;
        overflow: hidden;
        img {
          width: 98%;
        }
      }
    }
    .recommendComicbottom {
      width: 100%;
      height: 50%;
      // background-color: blanchedalmond;
      display: flex;
      justify-content: space-between;
      div {
        width: 32.5%;
        height: 100%;
        float: left;
        display: flex;
        align-items: flex-end;
        img {
          width: 99%;
        }
      }
    }
  }
}
.main .content .originalDiv {
  height: 502px;
  width: 100%;
  background-color: #ffffff;
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  .title {
    width: 100%;
    height: 42px;
    display: flex;
    justify-content: space-between;
    span {
      height: 100%;
      float: left;
      display: flex;
      align-items: center;
    }
    .moreStyle {
      img {
        margin-left: 10px;
        margin-top: 3px;
      }
    }
    .fontStyle {
      font-size: 28px;
      font-weight: bold;
      img {
        margin-right: 20px;
      }
    }
  }
  .originalComicDiv {
    flex: 1;
    background-color: #ffffff;
    .originalComicImgList {
      height: 100%;
      width: 100%;
      position: relative;
      /deep/ .swiper-button-prev {
        position: absolute;
        left: -30px;
      }
      /deep/ .swiper-button-next {
        position: absolute;
        right: -30px;
      }
      .swiper-container {
        height: 100%;
        width: 100%;

        /deep/ .swiper-slide {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;

          .originalComicInfo {
            height: 220px;
            width: 381px;
            float: left;
            display: flex;
            .imgDiv {
              height: 100%;
              img {
                height: 100%;
              }
            }
            .comicInfo {
              margin-left: 10px;
              background-color: #ffffff;
              overflow: hidden;
              position: relative;
              .title {
                display: block;
                font-size: 18px;
                font-weight: bold;
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
                line-height: 60px;
              }
              .el-rate .el-rate__item {
                margin-right: -5px;
                .el-rate__icon {
                  font-size: 10px;
                }
              }

              .chapter {
                display: flex;
                font-size: 15px;
                margin-top: 50px;
                a {
                  margin-left: 20px;
                  flex: 1;
                  float: left;
                  text-overflow: ellipsis;
                  overflow: hidden;
                  white-space: nowrap;
                  color: red;
                }
              }
              .content {
                font-size: 15px;
              }
              .labelDiv {
                position: absolute;
                bottom: 3px;
                display: flex;
                justify-content: flex-end;
              }
            }
          }
        }
      }
    }
  }
}
// .main .content .originalDiv .originalComicDiv:hover {
//   background-color: green;
// }
.main .content .originalComicPage {
  height: 20px;
  width: 100%;
  background-color: #ffffff;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  /deep/ .swiper-pagination {
    position: absolute;
    .swiper-pagination-bullet {
      margin: 0px 1px;
    }
  }
  /deep/ .swiper-pagination-bullet-active {
    width: 23px;
    background-color: #fd113a;
    border-radius: 5px;
  }
}
.main .content .ranking {
  height: 350px;
  width: 1200px;
  // background-color: indigo;
  display: flex;
  justify-content: space-between;
  margin-top: 30px;
}
.main .content .recentUpdateComicMain {
  height: 646px;
  width: 100%;
  //background-color: gold;
  display: flex;
  flex-direction: column;
}
.main .content .recentUpdateComicMain {
  .title {
    height: 50px;
    width: 100%;
    //    background-color: aliceblue;

    i {
      font-size: 35px;
      float: left;
      display: flex;
      height: 100%;
      align-items: center;
      color: #fd113a;
    }
    span {
      display: block;
      height: 100%;
      font-size: 25px;
      margin-left: 15px;
      float: left;
      display: flex;
      align-items: center;
      font-weight: bold;
    }
    ul {
      float: left;
      display: block;
      height: 100%;
      margin-left: 50px;
      display: flex;
      align-items: center;
      li {
        font-size: 18px;
        list-style: none;
        float: left;
        margin-left: 25px;
        height: 100%;
        a {
          text-decoration: none;
          padding-bottom: 2px;
          border-bottom-width: 3px;
          border-bottom-color: #ccc;
          color: black;
          line-height: 20px;
          display: block;
          margin-top: 16px;
        }
        .highlightStyle {
          border-bottom-style: solid;
          border-bottom-color: #fd113a;
          color: #fd113a;
        }
      }
    }
  }
  .infoDiv {
    margin-top: 8px;
    flex: 1;
    //background-color: cadetblue;
    .recentUpdateMain {
      display: none;
    }
    .recentUpdateShowStyle {
      display: block;
    }
  }
}
.main .content .raskMainDiv {
  margin-top: 40px;
  height: 355px;
  width: 100%;
  //background-color: aliceblue;
  display: flex;
  flex-direction: column;
  display: flex;
  align-content: space-between;
}
.main .content .raskMainDiv {
  .title {
    height: 42px;
    width: 100%;
    // background-color: aqua;
    display: flex;
    justify-content: space-between;
    .titleImg {
      display: flex;
      align-items: center;
      height: 100%;
      float: left;
      span {
        margin-left: 15px;
        font-size: 25px;
        font-weight: bold;
      }
    }
    .moreDiv {
      float: left;
      height: 100%;
      display: flex;
      align-items: center;
      img {
        position: relative;
        top: 2px;
        margin-left: 10px;
        margin-right: 3px;
      }
    }
  }
  .raskInfoMain {
    width: 100%;
    flex: 1;
    //background-color: bisque;
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    .infoMain {
      float: left;
    }
  }
}
.main .content .hotCategoriesMain {
  margin-top: 40px;
  height: 650px;
  width: 100%;
  //background-color: khaki;
  display: flex;
  flex-direction: column;
}
.main .content .hotCategoriesMain {
  .hotCategoriesMainTitle {
    width: 100%;
    height: 34px;
    //background-color: lavenderblush;
    display: flex;
    align-items: center;
    position: relative;
    i {
      font-size: 32px;
      color: red;
    }
    .title {
      font-size: 25px;
      font-weight: bold;
      margin-left: 10px;
    }
    ul {
      margin-left: 30px;
      li {
        float: left;
        list-style: none;
        font-size: 18px;
        margin-left: 25px;
      }
      .hotCategoriesHighlightStyle {
        color: red;
        border-bottom: 3px solid red;
      }
    }
    .moreDiv {
      position: absolute;
      right: 3px;
      img {
        margin-left: 10px;
      }
    }
  }
  .hotCategoriesInfoMain {
    flex: 1;
    .hotCategoriesInfo {
      display: none;
    }
    .divDisplay {
      display: flex;
    }
  }
}
.main .content .endDiv {
  margin-top: 20px;
  height: 340px;
  width: 100%;
  background-color: yellow;
}
</style>
